
<template>
  <div style="padding:20px" v-if="zfNameflag">
    <parklist :getParkDetail="parkChange" :getParkNameMap="getParkName"></parklist>
    <div class="subject">
      <div class="tab" style="margin-top: 0px;">
        <div class="Unit" style="width:100%">
          <div class="Unit-title">安全生产-浙江</div>
          <div style="display:flex">
            <div class="background1">
              <span class="font1">今日园区事故：</span><br>
              <div style="text-align:center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                <animate-number class="font2" from="0" :to="header.parkAccidentsNum" :key="header.parkAccidentsNum" duration="5000" from-color="#1492FF" to-color="#1492FF"></animate-number>
                <span class="font3">起</span>
              </div>
            </div>
            <div class="background1">
              <span class="font1">今日实时报警数：</span><br>
              <div style="text-align:center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                <animate-number class="font2" from="0" :to="header.parkRealtimeAlarmNum" :key="header.parkRealtimeAlarmNum" duration="5000" from-color="#1492FF" to-color="#1492FF"></animate-number>
                <span class="font3">起</span>
              </div>
            </div>
            <div class="background1">
              <span class="font1">累计处理安全事故：</span><br>
              <div style="text-align:center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                <animate-number class="font2" from="0" :to="header.handleSafeAccidentsNum" :key="header.handleSafeAccidentsNum" duration="5000" from-color="#1492FF" to-color="#1492FF"></animate-number>
                <span class="font3">起</span>
              </div>
            </div>
            <div class="background1">
              <span class="font1">两重点一重大（工艺）落实：</span><br>
              <div style="text-align:center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                <animate-number class="font2" from="0" :to="header.dangerTechnologyNum" :key="header.dangerTechnologyNum" duration="5000" from-color="#1492FF" to-color="#1492FF"></animate-number>
                <span class="font3">起</span>
              </div>
            </div>
            <div class="background1" style="margin-right:0;cursor: pointer;">
              <span class="font1">今日危化品装货总量：</span><br>
              <div style="text-align:center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" @click="to2()">
                <animate-number class="font2" from="0" to="7000" duration="5000" from-color="#1492FF" to-color="#1492FF"></animate-number>
                <!-- <animate-number class="font2" from="0" :to="header.onDutySecurityPersonnelNum" :key="header.onDutySecurityPersonnelNum" duration="5000" from-color="#1492FF" to-color="#1492FF"></animate-number> -->
                <span class="font3">吨</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yuanqu">
      <div style="display:flex;width: 100%">
        <div style="margin-right: 1.4%;width: 75%">
          <div class="left_baidu" style="overflow: hidden">
            <div id="annular1" style="width:100%;height:620px"></div>
            <div style="position: absolute;right:20px;top: 20px;width: 220px;height: 160px;">
              <div style="width: 100%;height: 35px;background: linear-gradient(180deg, #0885F5 0%, #13BBFB 100%);padding: 5px 10px 5px 10px;">
                <div style="font-size: 15px;font-weight: 600;color: #FFFFFF;line-height: 25px;">安全通告</div>
              </div>
              <div style="width: 100%;height: 130px;background: rgba(255, 255, 255, 0.6);padding: 6px;">
                <div style="width: 100%;height: 100%;background: #FFFFFF;padding: 5px 5px 0px 10px;">
                  <el-table
                    :data="ParkAccidentReport"
                    ref="table1"
                    max-height="110px"
                    :row-style="{height:'28px'}"
                    :cell-style="{padding:'0px', fontSize: '13px'}"
                    :show-header="false"
                    :header-row-style="{height:'28px'}"
                    :header-cell-style="{background:'#F7F8FA', color: '#333333', padding:'0px', fontSize: '13px', fontWeight: 'blod'}"
                    style="width: 100%;">
                    <el-table-column prop="accidentnmae" :show-overflow-tooltip="true" label="通告内容">
                      <template scope="scope">
                        <i class="el-icon-bell" style="color:#1492FF;margin-right:10px"></i>
                        <span style="color: #1492FF" @click="showDetail(scope.row)">{{scope.row.accidentNmae}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <el-dialog
                title="安全通告详情"
                :visible.sync="dialogVisible"
                width="42%"
                center>
                <el-row style="font-size: 16px;color: #333333;font-weight: 700">{{accidentDetail.accidentNmae}}</el-row>
                <el-row style="margin-top:10px">
                  <el-col :span="4" style="background:#1492FF;color: #FFFFFF;padding:4px;text-align:center;font-size: 14px">{{accidentDetail.accidentLevel}}</el-col>
                  <el-col :span="19" :offset="1" style="margin-top:4px;font-size: 16px;color: #666666;">{{accidentDetail.nameAbbreviation}}/{{accidentDetail.entName}}</el-col>
                </el-row>
                <el-row style="margin-top:40px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故描述：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.describes}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故原因：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.accidentReason}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故分析：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.accidentAnalyse}}</el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
                </span>
              </el-dialog>
            </div>
            <div class="datepicker">
              <span style="font-size: 16px;font-weight: 600;color: #FFFFFF;margin-right: 10px;">全省危险作业分布</span>
              <el-date-picker
                v-model="month"
                type="month"
                :picker-options="pickerOptions"
                :clearable="false"
                :editable="false"
                @change="getTotalSafeTimeScreen"
                placeholder="选择月">
              </el-date-picker>
            </div>
            <el-dialog :visible.sync="dialogTableVisible" :title="dialogTitle" center>
              <el-table :data="gridData"
                  class="customer-table"
                  :row-style="{height:'32px'}"
                  :cell-style="{padding:'0px'}"
                  style="width: 100%;margin-bottom: 20px;"
                  height="370px"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <!-- <el-table-column property="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
                <el-table-column v-if="detailPartType === 'emergencyJob'" property="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                <el-table-column v-if="detailPartType === 'emergencyJob'" property="jobName" :show-overflow-tooltip="true" label="作业名称"></el-table-column>
                <el-table-column v-if="detailPartType === 'emergencyJob'" property="dangerLevel" :show-overflow-tooltip="true" label="危险级别"></el-table-column>
                <el-table-column v-if="detailPartType === 'potentialDanger'" property="potentialName" :show-overflow-tooltip="true" label="隐患名称"></el-table-column>
                <el-table-column v-if="detailPartType === 'potentialDanger'" property="potentialLevel" :show-overflow-tooltip="true" label="隐患级别"></el-table-column>
                <el-table-column v-if="detailPartType === 'potentialDanger'" property="potentialStatus" :show-overflow-tooltip="true" label="隐患状态"></el-table-column>
                <el-table-column property="createdAt" :show-overflow-tooltip="true" label="事件时间" width="200px"></el-table-column>
              </el-table>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-size="limit"
                background
                layout="prev, pager, next"
                :total="total"
                style="text-align: center;">
              </el-pagination>
            </el-dialog>
          </div>
        </div>
        <div class="right_all">
          <el-row class="right_top">
            <div style="font-size:18px; margin:15px;color: #333333;font-weight:700; text-align:center; width:150;">事故类型</div>
            <div id="annular4" style="width: 100%;height: 240px"></div>
            <!-- <div style="font-size:18px; margin:20px;color: #333333;font-weight:700; text-align:center; width:150;">安全通告</div>
            <div style="width: 100%;height:220px;margin-top:10px;">
              <el-table :data="ParkAccidentReport"
                  class="customer-table"
                  :row-style="{height:'70px'}"
                  :cell-style="{padding:'20px'}"
                  style="width: 100%;cursor: pointer;"
                  height="220px"
                  ref="table1"
                  :show-header="false"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column prop="accidentnmae" :show-overflow-tooltip="true" label="通告内容">
                  <template scope="scope">
                    <i class="el-icon-bell" style="color:#1492FF;margin-right:10px"></i>
                    <span style="color: #1492FF" @click="showDetail(scope.row)">{{scope.row.accidentNmae}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog
                title="安全通告详情"
                :visible.sync="dialogVisible"
                width="42%"
                center>
                <el-row style="font-size: 16px;color: #333333;font-weight: 700">{{accidentDetail.accidentNmae}}</el-row>
                <el-row style="margin-top:10px">
                  <el-col :span="4" style="background:#1492FF;color: #FFFFFF;padding:4px;text-align:center;font-size: 14px">{{accidentDetail.accidentLevel}}</el-col>
                  <el-col :span="19" :offset="1" style="margin-top:4px;font-size: 16px;color: #666666;">{{accidentDetail.nameAbbreviation}}/{{accidentDetail.entName}}</el-col>
                </el-row>
                <el-row style="margin-top:40px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故描述：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.describes}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故原因：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.accidentReason}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故分析：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.accidentAnalyse}}</el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
                </span>
              </el-dialog>
            </div> -->
          </el-row>
          <el-row class="right_center">
            <div style="font-size:18px; margin-top:20px; color: #333333; font-weight:700; text-align:center; width:100%;">实时报警</div>
            <div style="padding:20px 20px 0 20px;display: flex;justify-content: space-between;">
              <div style="color:#333333;font-size:14px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">实时报警数: {{realtimeAlarmCount}}</div>
              <div style="color:#979797;font-size:12px">{{nowTime}}</div>
            </div>
            <div style="width: 100%;height:200px;padding:0 15px;margin-top:10px">
              <el-table :data="realtimeAlarm"
                  class="customer-table"
                  :row-style="{height:'30px'}"
                  :cell-style="{padding:'0px'}"
                  style="width: 100%"
                  height="210px"
                  ref="table2"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <!-- <el-table-column type="index" label="排名" width="50px" align="center"></el-table-column> -->
                <el-table-column prop="entName" :show-overflow-tooltip="true" width="150px" label="企业名称"></el-table-column>
                <el-table-column prop="alarmTypeName" align="center" :show-overflow-tooltip="true" label="报警因子"></el-table-column>
                <el-table-column prop="createDate" align="center" :show-overflow-tooltip="true" label="报警时间"></el-table-column>
              </el-table>
            </div>
          </el-row>
        </div>
      </div>
    </div>
    <div class="securitybottom">
      <div style="display: flex;">
        <div style="margin-right: 1.4%;width:46%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">隐患数量</span>
            </div>
            <div style="margin-bottom: 20px;margin-left:20px">
              <el-button-group>
                <el-button @click="dangerTypeChange('total')" size="small" :class="dangerType==='total'?'primaryButton':''">全部</el-button>
                <el-button @click="dangerTypeChange('major')" size="small" :class="dangerType==='major'?'primaryButton':''">重大隐患</el-button>
                <el-button @click="dangerTypeChange('more')" size="small" :class="dangerType==='more'?'primaryButton':''">较大隐患</el-button>
                <el-button @click="dangerTypeChange('serious')" size="small" :class="dangerType==='serious'?'primaryButton':''">严重隐患</el-button>
                <el-button @click="dangerTypeChange('commonly')" size="small" :class="dangerType==='commonly'?'primaryButton':''">一般隐患</el-button>
              </el-button-group>
            </div>
            <div id="annular2" style="width: 600px; height: 300px"></div>
          </div>
        </div>
        <div style="margin-right: 1.4%;width:27%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <el-tooltip class="item" effect="dark" content="隐患数+危险作业数" placement="top">
                <span class="title_sty">安全风险指数</span>
              </el-tooltip>
            </div>
            <div style="padding:20px">
              <div style="display:flex;height:120px">
                <div class="background" style="margin-left:5px">
                  <div style="text-align: center;margin-top: 10px;">
                    <img src="~@/assets/img/first.png" alt="">
                  </div>
                  <div class="text">{{safetyRisk[0].totalNum}}</div>
                  <div class="text2">{{safetyRisk[0].nameAbbreviation}}</div>
                </div>
                <div class="background">
                  <div style="text-align: center;margin-top: 10px;">
                    <img src="~@//assets/img/second.png" alt="">
                  </div>
                  <div class="text">{{safetyRisk[1].totalNum}}</div>
                  <div class="text2">{{safetyRisk[1].nameAbbreviation}}</div>
                </div>
                <div class="background">
                  <div style="text-align: center;margin-top: 10px;">
                    <img src="~@/assets/img/third.png" alt="">
                  </div>
                  <div class="text">{{safetyRisk[2].totalNum}}</div>
                  <div class="text2">{{safetyRisk[2].nameAbbreviation}}</div>
                </div>
              </div>
            </div>
            <div style="padding:20px">
              <div style="display:flex;height:80px">
                <div class="background2" style="margin-left:5px">
                  <div class="text">{{safetyRisk[3].totalNum}}</div>
                  <div class="text2">{{safetyRisk[3].nameAbbreviation}}</div>
                </div>
                <div class="background2">
                  <div class="text">{{safetyRisk[4].totalNum}}</div>
                  <div class="text2">{{safetyRisk[4].nameAbbreviation}}</div>
                </div>
                <div class="background2">
                  <div class="text">{{safetyRisk[5].totalNum}}</div>
                  <div class="text2">{{safetyRisk[5].nameAbbreviation}}</div>
                </div>
              </div>
              <div style="display:flex;height:80px">
                <div class="background2" style="margin-left:5px">
                  <div class="text">{{safetyRisk[6].totalNum}}</div>
                  <div class="text2">{{safetyRisk[6].nameAbbreviation}}</div>
                </div>
                <div class="background2">
                  <div class="text">{{safetyRisk[7].totalNum}}</div>
                  <div class="text2">{{safetyRisk[7].nameAbbreviation}}</div>
                </div>
                <div class="background2">
                  <div class="text">{{safetyRisk[8].totalNum}}</div>
                  <div class="text2">{{safetyRisk[8].nameAbbreviation}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width:26%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">风险管控</span>
            </div>
            <div id="annular3" style="width: 100%;height: 350px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi'
const echarts = require('echarts')
export default {
  components: { parklist },
  data () {
    return {
      parkNameMap: new Map(),
      now: '',
      nowTime: '', // 当前时间
      zfNameflag: true,
      myChart1: {},
      option1: {},
      myChart2: {},
      option2: {},
      myChart3: {},
      option3: {},
      myChart4: {},
      option4: {},
      header:{
        dangerTechnologyNum: 0,
        handleSafeAccidentsNum: 0,
        onDutySecurityPersonnelNum: 0,
        parkAccidentsNum: 0,
        parkRealtimeAlarmNum: 0,
      },
      realtimeAlarmCount:0,
      month: '',
      selecedMonth: '',
      data: [],
      center: [],
      
      dialogTitle: '',
      total: 0,
      limit: 10,
      page: 1,
      detailParkCode: '',
      detailPotentialStatus: '',
      detailPartType: '',
      gridData: [],
      dialogTableVisible: false,
      dialogVisible: false,
      accidentDetail: {
        accidentnmae: '',
        nameAbbreviation: '',
        entName: '',
        describes: '',
        accidentreason: '',
        accidentlevel: '',
        accidentanalyse: ''
      },
      dangerType: 'total', // 园区隐患等级类型
      // dangerDate: '1', // 园区隐患时间类型
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },

      ParkAccidentReport: [], // 安全通告
      parkPotentialDanger: [], // 园区隐患
      realtimeAlarm: [], // 实时报警
      safetyRisk: [
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
        {
          totalNum:0,
          nameAbbreviation:''
        },
      ] // 安全风险指数
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted () {
    this.now = new Date()
    this.nowTime = this.now.getFullYear() + '-' + this.formatDate(this.now, 'MM-dd hh:mm:ss')
    this.initDate()
    this.getHeader()
    this.getData()
    this.renderMyChart1()
    this.renderMyChart2()
    this.renderMyChart3()
    this.renderMyChart4()
    this.getTotalSafeTimeScreen()
    // 表格轮播
    this.getright_table1()
    this.getright_table2()
  },
  methods: {
    // 切换园区
    parkChange (data) {
      sessionStorage.setItem('routeName1', data.coordinateList[0].name)
      this.$router.push({
        name: 'zfParkDetailLink',
        query: {
          data: data
        }
      })
    },
    getParkName (map) {
      this.parkNameMap = map
    },
    initDate () {
      this.month = new Date()
      let today = new Date()
      let year = today.getFullYear() + ''
      let month = today.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      this.selecedMonth = year + month
    },
    getHeader () { // 头- 安全生产数量
      this.$http.post(`/home/chemical/parkInfoGovPage/getTotalSafeHeader`,{}
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.header.dangerTechnologyNum = res.data.dangerTechnologyNum
          this.header.handleSafeAccidentsNum = res.data.handleSafeAccidentsNum
          this.header.onDutySecurityPersonnelNum = res.data.onDutySecurityPersonnelNum
          this.header.parkAccidentsNum = Number(res.data.parkAccidentsNum)
          this.header.parkRealtimeAlarmNum = res.data.parkRealtimeAlarmNum
        }
      })
    },
    getData () { // 安全通告、实时报警
      this.$http.post(`/home/chemical/parkInfoGovPage/getTotalSafeNonTimeScreen`,{}
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.ParkAccidentReport = res.data.parkSafetyBulletin
          this.realtimeAlarm = res.data.parkRealTimeAlarm
          this.realtimeAlarmCount = this.realtimeAlarm.length
        }
      })
    },
    getTotalSafeTimeScreen(val){
      let month = this.month.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      this.selecedMonth = this.month.getFullYear() + month
      this.$http.post(`/home/chemical/parkInfoGovPage/getTotalSafeTimeScreen`,
        {
          months:this.selecedMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          // 隐患数量
          this.parkPotentialDanger = res.data.eachParkPotentialDanger
          this.option2.xAxis[0].data = this.parkPotentialDanger.nameAbbreviation
          this.option2.series[0].data = this.parkPotentialDanger.total.notRectified
          this.option2.series[1].data = this.parkPotentialDanger.total.rectified
          this.myChart2.setOption(this.option2,true)
          // 安全风险指数
          this.safetyRisk = res.data.eachParkSafetyRisk
          // 风险管控
          this.option3.series[0].data = res.data.eachParkRiskPoint
          this.option3.series[0].data.forEach(item =>{
            if (item.name === '低风险') {
              item.itemStyle = {
                normal:{
                  color: "#70AD47"
                }
              }
            }else if (item.name === '重大风险') {
              item.itemStyle = {
                normal:{
                  color: "#FF6B00"
                }
              }
            }else if (item.name === '较大风险') {
              item.itemStyle = {
                normal:{
                  color: "#FFC000"
                }
              }
            }else if (item.name === '一般风险') {
              item.itemStyle = {
                normal:{
                  color: "#1782FF"
                }
              } 
            }
          })
          this.myChart3.setOption(this.option3,true)

          this.option4.series[0].data = res.data.eachParkAccidentTypeRatio
          // this.option4.series[0].data.forEach(item =>{
          //   if (item.name === '低风险') {
          //     item.itemStyle = {
          //       normal:{
          //         color: "#70AD47"
          //       }
          //     }
          //   }else if (item.name === '重大风险') {
          //     item.itemStyle = {
          //       normal:{
          //         color: "#FF6B00"
          //       }
          //     }
          //   }else if (item.name === '较大风险') {
          //     item.itemStyle = {
          //       normal:{
          //         color: "#FFC000"
          //       }
          //     }
          //   }else if (item.name === '一般风险') {
          //     item.itemStyle = {
          //       normal:{
          //         color: "#1782FF"
          //       }
          //     } 
          //   }
          // })
          this.myChart4.setOption(this.option4,true)
          // 地图
          // const map = new Map()
          let arr = []
          let map = {}
          res.data.eachParkDangerJob.forEach(item =>{
            // map.set(item.nameAbbreviation,[item.longitude,item.latitude])
            map[item.nameAbbreviation] = [item.longitude,item.latitude]
            // map.push({
            //   [item.nameAbbreviation]:[item.longitude,item.latitude]
            // })
            arr.push({
              name: item.nameAbbreviation,
              parkCode: item.parkCode,
              value: item.danjerJobNum
            })
          })
          this.center = map
          this.data = arr
          let lineData = this.data.map(item => {
            // console.log(Math.pow(0.1,item.value.toString().length));
            return {
              coords: [
                this.center[item.name],
                [this.center[item.name][0], this.center[item.name][1] + item.value * Math.pow(0.1,item.value.toString().length)/2]
              ]
            }
          })
          let scatterData = this.data.map(item => {
            return [this.center[item.name][0], this.center[item.name][1] + item.value * Math.pow(0.1,item.value.toString().length)/2, item.parkCode, item.name]
          })
          let scatterData2 = this.data.map(item => {
            return this.center[item.name]
          })
          let scatterData3 = this.data.map(item => {
            return this.center[item.name].concat(item.name)
          })
          let uploadedDataURL = require('../zf/zhejiang.json')
          let uploadedDataURL2 = require('../zf/zhejiangsheng.json')
          echarts.registerMap('js2', uploadedDataURL2)
          echarts.registerMap('js', uploadedDataURL)
          this.option1.series[0].data = lineData
          this.option1.series[1].data = scatterData
          this.option1.series[2].data = scatterData2
          this.option1.series[3].data = scatterData3
          this.myChart1.setOption(this.option1,true)
        }
      })
    },
    emergencyJobClick (val) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = val.data[3] + '危险作业'
      this.dialogTableVisible = true
      this.detailParkCode = val.data[2]
      this.detailPartType = 'emergencyJob'
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkDangerJobDetail`,
        {
          months : this.selecedMonth,
          parkCode: val.data[2],
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.map(item => {
            return {
              jobName: item.jobName,
              createdAt: item.createTime,
              nameAbbreviation: item.nameAbbreviation,
              dangerLevel: item.dangerLevel === 0 ? '特级作业' : item.dangerLevel === 1 ? '一级作业' : item.dangerLevel === 2 ? '二级作业' : '',
              entName: item.entName
            }
          })
          this.total = Number(res.data.count)
        }
      })
    },
    potentialDangerClick (val) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = val.name + '隐患数量'
      this.dialogTableVisible = true
      this.detailParkCode = this.parkPotentialDanger.parkCode[this.parkPotentialDanger.nameAbbreviation.indexOf(val.name)]
      this.detailPartType = 'potentialDanger'
      this.detailPotentialStatus = val.seriesName === '已整改隐患' ? 'rectified' : 'notRectified'
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkPotentialDangerDetail`,
        {
          months: this.selecedMonth,
          parkCode: this.detailParkCode,
          limit: this.limit,
          page: this.page,
          potentialDangerLevel: this.dangerType,
          potentialDangerStatus: this.detailPotentialStatus
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.map(item => {
            return {
              potentialName: item.potentialName,
              createdAt: item.createTime,
              nameAbbreviation: item.name,
              potentialStatus: item.potentialStatus === 0 ? '未整改' : item.potentialStatus === 1 ? '已整改' : item.potentialStatus === 2 ? '已验收' : '',
              potentialLevel: item.potentialLevel === 0 ? '重大隐患' : item.potentialLevel === 1 ? '较大隐患' : item.potentialLevel === 2 ? '严重隐患' : item.potentialLevel === 3 ? '一般隐患' : ''
            }
          })
          this.total = Number(res.data.count)
        }
      })
    },
    handleCurrentChange (val) {
      if (this.detailPartType === 'potentialDanger') {
        this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkPotentialDangerDetail`,
          {
            months: this.selecedMonth,
            parkCode: this.detailParkCode,
            limit: this.limit,
            page: this.page,
            potentialDangerLevel: this.dangerType,
            potentialDangerStatus: this.detailPotentialStatus
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.map(item => {
              return {
                potentialName: item.potentialName,
                createdAt: item.createTime,
                nameAbbreviation: item.name,
                potentialStatus: item.potentialStatus === 0 ? '未整改' : item.potentialStatus === 1 ? '已整改' : item.potentialStatus === 2 ? '已验收' : '',
                potentialLevel: item.potentialLevel === 0 ? '重大隐患' : item.potentialLevel === 1 ? '较大隐患' : item.potentialLevel === 2 ? '严重隐患' : item.potentialLevel === 3 ? '一般隐患' : ''
              }
            })
            this.total = Number(res.data.count)
          }
        })
      }else if (this.detailPartType === 'emergencyJob') {
      this.page = val
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkDangerJobDetail`,
        {
          months: this.selecedMonth,
          parkCode: this.detailParkCode,
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.map(item => {
            return {
              jobName: item.jobName,
              createdAt: item.createTime,
              nameAbbreviation: item.nameAbbreviation,
              dangerLevel: item.dangerLevel === 0 ? '特级作业' : item.dangerLevel === 1 ? '⼀级作业' : item.dangerLevel === 2 ? '⼆级作业' : '',
              entName: item.entName
            }
          })
          this.total = Number(res.data.count)
        }
      })
      }
    },
    showDetail (name) {
      this.accidentDetail = { ...name }
      this.dialogVisible = true
    },
    // 隐患数量
    dangerTypeChange (type) {
      this.dangerType = type
      if (type === 'total'){ // 全部
        this.option2.series[0].data = this.parkPotentialDanger.total.notRectified
        this.option2.series[1].data = this.parkPotentialDanger.total.rectified
        this.myChart2.setOption(this.option2,true) 
      }else if (type === 'major'){ // 重大
        this.option2.series[0].data = this.parkPotentialDanger.major.notRectified
        this.option2.series[1].data = this.parkPotentialDanger.major.rectified
        this.myChart2.setOption(this.option2,true) 
      }else if (type === 'more'){ // 较大
        this.option2.series[0].data = this.parkPotentialDanger.more.notRectified
        this.option2.series[1].data = this.parkPotentialDanger.more.rectified
        this.myChart2.setOption(this.option2,true) 
      }else if (type === 'serious'){ // 严重
        this.option2.series[0].data = this.parkPotentialDanger.serious.notRectified
        this.option2.series[1].data = this.parkPotentialDanger.serious.rectified
        this.myChart2.setOption(this.option2,true) 
      }else if (type === 'commonly'){ // 一般
        this.option2.series[0].data = this.parkPotentialDanger.commonly.notRectified
        this.option2.series[1].data = this.parkPotentialDanger.commonly.rectified
        this.myChart2.setOption(this.option2,true) 
      }
    },
    // 地图echarts初始化
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('../zf/zhejiang.json')
      let uploadedDataURL2 = require('../zf/zhejiangsheng.json')
      this.center = {
        '建德高新': [119.406622, 29.549387],
        '宁波石化': [121.619429, 30.046439],
        '瑞安经开': [120.649441, 27.763344],
        '长兴经开': [119.872203, 30.814460],
        '新材料（嘉兴）': [121.053902, 30.607645],
        '上虞经开': [120.816856, 30.188745],
        '东阳横店': [120.280792, 29.139525],
        '衢州高新': [118.859785, 28.905882],
        '舟山石化': [121.983912, 30.332220],
        '头门港经开': [121.641561, 28.757177],
        '仙居经开': [120.835217, 28.885000],
        '丽水经开': [119.861377, 28.417177]
      }
      this.data = [
        { name: '建德高新', value: 999 },
        { name: '宁波石化', value: 10 },
        { name: '瑞安经开', value: 10 },
        { name: '长兴经开', value: 10 },
        { name: '新材料（嘉兴）', value: 10 },
        { name: '上虞经开', value: 10 },
        { name: '东阳横店', value: 10 },
        { name: '衢州高新', value: 10 },
        { name: '舟山石化', value: 10 },
        { name: '头门港经开', value: 10 },
        { name: '仙居经开', value: 10 },
        { name: '丽水经开', value: 10 }
      ]
      let lineData = this.data.map(item => {
        return {
          coords: [
            this.center[item.name],
            [this.center[item.name][0], this.center[item.name][1] + item.value * Math.pow(0.1,item.value.length)]
          ]
        }
      })
      let scatterData = this.data.map(item => {
        return [this.center[item.name][0], this.center[item.name][1] + item.value * Math.pow(0.1,item.value.length), item.parkCode, item.name]
      })
      let scatterData2 = this.data.map(item => {
        return this.center[item.name]
      })
      let scatterData3 = this.data.map(item => {
        return this.center[item.name].concat(item.name)
      })
      echarts.registerMap('js2', uploadedDataURL2)
      echarts.registerMap('js', uploadedDataURL)
      this.option1 = {
        backgroundColor: '#013954',
        // backgroundColor: '#fff',
        geo: [{
          map: 'js',
          aspectScale: 0.9,
          roam: true, // 是否允许缩放
          // zoom: 1.1, //默认显示级别
          layoutSize: '100%',
          layoutCenter: ['45%', '50%'],
          itemStyle: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                offset: 0,
                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 1,
            shadowColor: 'rgba(128, 217, 248, 1)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 10
          },
          emphasis: {
            itemStyle: {
              areaColor: '#005DDC'
            },
            label: {
              show: 0,
              color: '#fff'
            }
          },
          zlevel: 3
        },
        {
          map: 'js2',
          aspectScale: 0.9,
          roam: true, // 是否允许缩放
          // zoom: 1.1, //默认显示级别
          layoutSize: '100%',
          layoutCenter: ['45%', '50%'],
          itemStyle: {
            areaColor: {
              type: 'radial',
              x: 0.7,
              y: 0.5,
              r: 0.4,
              colorStops: [{
                offset: 0,
                color: '#56CCFB' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#0160AD' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            borderColor: '#37C1FD',
            borderWidth: 2
          },
          zlevel: 2,
          silent: true
        },
        {
          map: 'js2',
          aspectScale: 0.9,
          roam: true, // 是否允许缩放
          // zoom: 1.1, //默认显示级别
          layoutSize: '100%',
          layoutCenter: ['45%', '52%'],
          itemStyle: {
            areaColor: '#005DDC',
            borderColor: '#329BF5',
            borderWidth: 1
          },
          zlevel: 1,
          silent: true
        }
        ],
        series: [{
          type: 'lines',
          zlevel: 5,
          effect: {
            show: false,
            period: 4, // 箭头指向速度，值越小速度越快
            trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', // 箭头图标
            symbolSize: 5 // 图标大小
          },
          lineStyle: {
            width: 15, // 尾迹线条宽度
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#F09B0A' // 0% 处的颜色
              }, {
                offset: 0.2,
                color: '#F09B0A' // 0% 处的颜色
              }, {
                offset: 0.5,
                color: '#FEF03B' // 0% 处的颜色
              }, {
                offset: 0.7,
                color: '#FEF03B' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#F09B0A' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            opacity: 1, // 尾迹线条透明度
            curveness: 0 // 尾迹线条曲直度
          },
          label: {
            show: 0,
            position: 'end',
            formatter: '245'
          },
          silent: false,
          data: lineData
        }, {
          type: 'scatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          zlevel: 15,
          label: {
            show: !0,
            position: 'right',
            formatter: params => this.data[params.dataIndex].name + '(' + this.data[params.dataIndex].value + ')',
            padding: [4, 8],
            backgroundColor: '#003F5E',
            borderRadius: 5,
            borderColor: '#67F0EF',
            borderWidth: 1,
            color: '#67F0EF'
          },
          symbol: 'circle',
          symbolSize: [15, 8],
          itemStyle: {
            color: '#FEF03B',
            opacity: 1
          },
          silent: false,
          data: scatterData
        }, {
          type: 'scatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          zlevel: 5,
          symbol: 'circle',
          symbolSize: [15, 8],
          itemStyle: {
            color: '#F09B0A',
            opacity: 1,
            shadowColor: '#000',
            shadowBlur: 5,
            shadowOffsetY: 2
          },
          silent: false,
          data: scatterData2
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbol: 'circle',
          symbolSize: 4,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'fill',
            scale: 10
          },
          hoverAnimation: true,
          // label: {
          //   formatter: p => p.data[2],
          //   position: 'right',
          //   color: '#fff',
          //   fontSize: 14,
          //   distance: 10,
          //   show: !0
          // },
          itemStyle: {
            color: '#FEF134'
          },
          zlevel: 6,
          data: scatterData3
        }]
      }
      this.myChart1.setOption(this.option1)
      this.myChart1.on('georoam', (params) => {
        var option = this.myChart1.getOption() // 获得option对象
        if (params.zoom !== null && params.zoom !== undefined) { // 捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center // 下层的geo的中心位置随着上层geo一起改变

          option.geo[2].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
          option.geo[2].center = option.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
        } else { // 捕捉到拖曳时
          option.geo[1].center = option.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
          option.geo[2].center = option.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
        }
        this.myChart1.setOption(option) // 设置option
      })
      this.myChart1.on('click', (params) => {
        if (params.data&&params.data[3]) {
          this.emergencyJobClick(params)
        }
      })
    },
    // 隐患数量echarts初始化
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB', '#F6A93B'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        legend: {
          data: ['未整改隐患', '已整改隐患'],
          top: 10,
          right: 15
        },
        grid: {
          left: '8%',
          right: '4%',
          bottom: '11%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '未整改隐患',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: []
          },
          {
            name: '已整改隐患',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: []
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.myChart2.on('click', (params) => {
        this.potentialDangerClick(params)
      })
    },
    // 风险管控echarts初始化
    renderMyChart3 () {
      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      let charPiecurrentIndex = 0
      _this.myChart3 = echarts.init(document.getElementById('annular3'))
      _this.option3 = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          top: '80%',
          left: 'center',
          type: 'scroll'
        },
        // color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            roseType: 'area',
            type: "pie",
            radius: ['35%', '70%'],
            center: ["50%", "40%"],
            label: {
              //标识
              normal: {
                show: false,
                position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      _this.myChart3.setOption(_this.option3);
      // 鼠标移动上去的时候的高亮动画
      _this.myChart3.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts3);
        //取消之前高亮图形
        _this.myChart3.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        _this.myChart3.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        
        _this.myChart3.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        _this.myChart3.resize();
      })

      //自动高亮显示
      var chartHover = function() {
        var dataLen = _this.option3.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart3.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        charPiecurrentIndex = (charPiecurrentIndex+ 1) % dataLen;
         
        // 高亮当前图形
        _this.myChart3.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        _this.myChart3.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this.startCharts3 = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart3.on("mouseout", function(param) {
        if (!flag) {
          _this.startCharts3 = setInterval(chartHover, 2000);
          flag = true;
        }
      })
    },
    renderMyChart4 () {
      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      let charPiecurrentIndex = 0
      _this.myChart4 = echarts.init(document.getElementById('annular4'))
      _this.option4 = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          right: '6%',
          type: 'scroll',
          orient: 'vertical'
        },
        // color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            roseType: 'area',
            type: "pie",
            radius: ['50%', '70%'],
            center: ["30%", "45%"],
            label: {
              //标识
              normal: {
                show: false,
                position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      _this.myChart4.setOption(_this.option4);
      // 鼠标移动上去的时候的高亮动画
      _this.myChart4.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts4);
        //取消之前高亮图形
        _this.myChart4.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        _this.myChart4.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        
        _this.myChart4.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        _this.myChart4.resize();
      })

      //自动高亮显示
      var chartHover = function() {
        var dataLen = _this.option4.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart4.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        charPiecurrentIndex = (charPiecurrentIndex+ 1) % dataLen;
         
        // 高亮当前图形
        _this.myChart4.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        _this.myChart4.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this.startCharts4 = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart4.on("mouseout", function(param) {
        if (!flag) {
          _this.startCharts4 = setInterval(chartHover, 2000);
          flag = true;
        }
      })
    },
    getright_table1(){
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, "mouseenter", function() {
        isScroll = false
      })
      this.addEvent(divData, "mouseleave", function() {
        isScroll = true
      })
      setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    getright_table2(){
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table2
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, "mouseenter", function() {
        isScroll = false
      })
      this.addEvent(divData, "mouseleave", function() {
        isScroll = true
      })
      setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    to2(){
      this.$router.push({
        name: 'zfSafetyProduction2Link'
      })
    },
    addEvent(obj,sEvent,fn){
      if(obj.attachEvent){
        obj.attachEvent("on"+sEvent,fn)
      }else{
        obj.addEventListener(sEvent,fn,false)
      }
    },
    formatDate (date, fmt) {
      if (!date) return
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      let o = {
        'M+': addZero(date.getMonth() + 1),
        'd+': addZero(date.getDate()),
        'h+': addZero(date.getHours()),
        'm+': addZero(date.getMinutes()),
        's+': addZero(date.getSeconds())
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, str)
        }
      }
      function addZero (num) {
        return num >= 10 ? num : '0' + num
      }
      return fmt
    },
  }
}
</script>
<style lang='scss' scoped>
.subject{
  width: 100%;
  .tab{
    display: flex;
    justify-content:flex-start;
    margin-top: 20px;
    .Unit{
      padding: 0 40px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      // margin-left: 1.4%;
      padding-bottom: 20px;
      .Unit-title{
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        padding: 20px;
        color: #333333;
      }
      .background1{
        width: 20%;
        background-color: #EDF4FF;
        margin-right: 20px;
        padding: 10px;
      }
      .font1{
        margin-bottom: 5px;
        font-size: 16px;
        color: #333333;
      }
      .font2{
        font-weight: 700;
        // margin-left: 120px;
        margin-right: 10px;
        font-size: 30px;
      }
      .font3{
        margin-bottom: 5px;
        font-size: 16px;
        color: #979797;
      }
    }
  }
}
.yuanqu{
  margin-top: 20px;
  width: 100%;
  .left_baidu{
    position: relative;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 620px;
    width: 100%;
  }
  .right_all{
    height: 620px;
    width: 25%;
    margin-bottom: 20px;
    .right_top{
      height: 290px;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }
    .right_center{
      height: 310px;
      width: 100%;
      margin: 20px 0px 0px 0px;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }
  }
}
.securitybottom {
  .safePersonCount {
    height: 400px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
  .warnControll {
    height: 400px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 40px 10px 40px;
  }
}
.background{
  width:30%;
  margin-right:3%;
  border-radius: 5px;
  background: url("~@/assets/img/bk.png") no-repeat ;
  .text{
    text-align: center;
    margin-top: 10px;
    font-size:22px;
    color:#FFFFFF;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .text2{
    text-align: center;
    margin-top: 10px;
    font-size:14px;
    color:#FFFFFF;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.background2{
  width:30%;
  margin-right:3%;
  .text{
    text-align: center;
    margin-top: 10px;
    font-size:20px;
    color:#333333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .text2{
    text-align: center;
    margin-top: 10px;
    font-size:14px;
    color:#979797;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
/deep/.el-date-editor.el-input{
  width: 150px;
}
.datepicker{
  opacity:0.8;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9999;
}
.primaryButton {
  color: #FFFFFF;
  background-color: #1492ff;
  border-color: #1492ff;
}
</style>
<style>
.blue .el-input-group__append{
  background-color: #2690F3;
}
</style>
